<template>
	<view>
		<view v-if="list.id">
			<view class="content">
				<view class="content_top">
					<image src="../../static/icon9.png"></image>
					<view>
						<text>运单号：{{list.tWaybill.waybillNumber}}</text>
						<text>{{list.tWaybill.creationTime}}</text>
					</view>
				</view>
				<view class="description_box">
					<text>{{list.tWaybill.shipZone}}</text>
					<image src="../../static/iocn4.png"></image>
					<text>{{list.tWaybill.receiveZone}}</text>
				</view>
				<view class="description_top">
					<text>货物信息：{{list.tWaybill.goodsName}} / {{list.tWaybill.goodsPackagMethod}} / {{list.tWaybill.goodsSize}}m³ / {{list.tWaybill.goodsWeight}}T </text>
					<text>车辆信息：{{list.tWaybill.lesscarload}} / {{list.tWaybill.demandLength}} / {{list.tWaybill.demandLoad}}T / {{list.tWaybill.demandStyle}}</text>
				</view>
				<view class="descrip_top">
					<view class="box_box">装</view>
					<view class="descr_box">
							<text v-if="list.tWaybill.shipCompany=='null'">个体经营</text>
						<text v-else>{{list.tWaybill.shipCompany}}</text>
						<text>{{list.tWaybill.shipAddress}}</text>
					</view>
				</view>
				
				
				<view class="descrip_top">
					<view class="box_key">卸</view>
					<view class="descr_box">
					<text v-if="list.tWaybill.receiveCompany==''">个体经营</text>
					<text v-else>{{list.tWaybill.receiveCompany}}</text>
						<text>{{list.tWaybill.receiveAddress}}</text>
					</view>
				</view>
				<view class="content_box">
					<view>
						<text>路程全长：</text>
						<text class="box">{{list.tWaybill.totalDistance}}</text>
					</view>
					<view>
						<text>装货时间：{{list.tWaybill.loadTime}}</text>
					</view>
				</view>
			
				<view class="accordion" v-for="(item,index) in radiolist1" :key="index"  :class="indexnav== index?'active':''" @click="indexkndex(index,item)">
					<view class="accordion_list">
						<view class="accordion_fl">
							<!-- <image src="../../static/iocn26.png" v-if="item.disabled == false"></image>
							<image src="../../static/iocn25.png" v-else></image> -->
						</view>
						<view class="accordion_fr">
							<view class="accordion_top">
								<view class="fl">
									<image src="../../static/iocn8.png"></image>
									<view>
										<text>司机：{{item.tDriver.trueName}}</text>
										<text>车牌号：{{item.tDriver.carNumber}}</text>
									</view>
								</view>
								<view class="fr"  @click.stop="dakai(item)">
									<image src="../../static/iocn24.png"></image>
								</view>
							</view>
							<view class="accordion_key">
								<view><text>总运费：</text><text class="viewtop">{{item.offerNow}} 元</text></view>
								<view>
									<text>订&#12288;金：</text>
									<text class="viewtop">{{item.deposit}} 元</text>
									<text class="viewbox" v-if="item.tWaybill.returnDeposit == true">（可退回）</text>
									<text class="viewbox" v-else>（不可退还）</text>
								</view>
							</view>
			
						</view>
					</view>
					<view class="accordion_box">（订金支付至平台通宝，货主确认收货后由平台立即退还）</view>
				</view>
				
			</view>
			<!-- 弹窗 -->
			<view class="screenshot" v-show="notification" @click="guanbi()">
				<view class="screenshot_key">
					<image src="../../static/iocn10.png" class="image_top"></image>
					<image src="../../static/iocn7.png" class="image_gb"></image>
					<view class="screenshot_top">仅限使用注册号码拨打</view>
					<view class="screenshot_box">{{list.tDriver.mobile}}</view>
					<view class="screenshot_zhen" @click.stop="bohao()">立即拨号</view>
					<view class="screenshot_lis">已为您提供号码保护，支付定金后可查看真实号码</view>
				</view>
			</view>
			<view class="footer" @click="OfferConfirm()">确认运单</view>
			
		</view>
		<view v-else>
			<u-empty mode="message" icon="http://cdn.uviewui.com/uview/empty/message.png"></u-empty>
		</view>
	</view>
</template>

<script>
	import {GetOfferList,CallRecordCreate,OfferConfirm} from '@/public/Api/update.js'
	import {
		setValue,
		getValue
	} from '@/public/storeage/index.js'
	export default {
		data() {
			return {
				radiolist1: [],
				list:[],
				skipCount:0,
				maxResultCount:10,
				driverId:'',
				notification:false,
				mobile:'',
				indexnav:'50'
			};
		},
		onLoad(options) {
			this.GetOfferList(options)
		},
		methods: {
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			indexkndex(e,c){
				this.indexnav = e
				this.driverId = c.tDriver.id
			},
			dakai(e) {
				this.mobile = e.tDriver.mobile
				this.driverId = e.tDriver.id
				this.notification = true
			},
			guanbi() {
				this.notification = false
			},
			
			// 拨打电话
			 bohao() {
				let phone = this.mobile
				uni.makePhoneCall({
					phoneNumber: phone,
					success:(res) =>{
						this.CallRecordCreate();
					},
					fail:(res) =>  {
						console.log('打电话失败了');
					}
				})
			},
			
			// 创建通话记录
			async CallRecordCreate() {
				var waybillId = this.list.tWaybill.id
				var driverId = this.driverId
				var consignorId = this.list.tWaybill.shiperId
				try {
					const {
						data: res
					} = await CallRecordCreate({
						waybillId,
						driverId,
						consignorId
					})
					
				} catch (e) {}
			},
			
			//  获取报价详情
			async GetOfferList(options) {
				var waybillId = options.id
				var skipCount = this.skipCount
				var maxResultCount = this.maxResultCount
				try {
					const {
						data: res
					} = await GetOfferList({
						skipCount,
						maxResultCount,
						waybillId
					})
					this.list = res.result.items[0]
					this.radiolist1 = res.result.items
					
				} catch (e) {}
			},
			
			
			
			// 确认报价  确认运单
			async OfferConfirm(){
				var id = this.list.tWaybill.id
				var deposit = this.list.deposit
				var offer = this.list.offerNow
				var driverId = this.driverId
				if (driverId == '') {
					uni.showToast({
						title: "请选择司机",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				try {
					const {
						data: res
					} = await OfferConfirm({
						id,
						deposit,
						offer,
						driverId
					})
					uni.showToast({
						title: "成功",
						icon: 'none',
					})
					setTimeout(function() {
						uni.navigateBack({
							delta: 1, //返回层数，2则上上页
						})
					}, 600)
				} catch (e) {}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding: 0 15upx 50upx;
	}

	.content {
		background: #FFFFFF;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
		margin-top: 15upx;

		.content_top {
			display: flex;
			align-items: center;
			padding: 15upx 40upx;

			image {
				width: 51upx;
				height: 51upx;
			}

			view {
				padding-left: 30upx;

				text {
					display: block;
					font-size: 24.53upx;
					font-weight: 400;
					color: #383838;
				}
			}
		}

		.description_box {
			width: 100%;
			height: 75.35upx;
			opacity: 1;
			background: #F0F0F0;
			padding: 0 60upx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			text {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 22upx;
				color: #000;
				font-weight: bold;
			}

			image {
				width: 112upx;
				height: 112upx;
			}
		}

		.description_top {
			padding: 0 50upx;

			text {
				display: block;
				font-size: 24.53upx;
				color: #383838;
				padding-top: 20upx;
			}
		}

		.descrip_top {
			margin-top: 20upx;
			height: 75upx;
			opacity: 1;
			background: #F0F0F0;
			padding: 0 40upx;
			display: flex;
			align-items: center;

			.box_box {
				width: 56upx;
				height: 56upx;
				opacity: 1;
				border-radius: 10upx;
				background: #FFC300;
				font-size: 38upx;
				font-weight: bold;
				color: #fff;
				text-align: center;
				line-height: 56upx;
			}

			.box_key {
				width: 56upx;
				height: 56upx;
				opacity: 1;
				border-radius: 10upx;
				background: #EF4D3D;
				font-size: 38upx;
				font-weight: bold;
				color: #fff;
				text-align: center;
				line-height: 56upx;
			}

			.descr_box {
				padding-left: 28upx;

				text {
					display: block;
					font-size: 22upx;
					color: #000;
				}
			}
		}

		.content_box {
			padding: 0 40upx 30upx;
			// border-bottom: 2upx solid #E5E5E5;

			view {
				display: flex;
				align-items: center;
				padding-top: 12upx;

				text {
					font-size: 24upx;
					color: #000;
					font-weight: bold;
				}

				.box {
					color: #EF4D3D;
				}
			}
		}

		.accordion {
			width: 100%;
			background-color: #F0F0F0;
			padding: 20upx 30upx;
			margin-top: 20upx;
			border: 2upx solid #F0F0F0;
			.accordion_list {
				display: flex;
				align-items: flex-start;
				justify-content: flex-start;
			}

			.accordion_box {
				font-size: 21upx;
				color: #383838;
				background-color: rgba(240, 77, 62, 0.15);
				display: inline-block;
			}

			.accordion_fl {
				width: 20upx;
				height: 20upx;
				background-color: #fff;
				border-radius: 50%;
				// padding-top: 28upx;

				// image {
				// 	width: 40upx;
				// 	height: 40upx;
				// }
			}

			.accordion_fr {
				// display: flex;
				width: 100%;
				padding-left: 45upx;

				.accordion_top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.fl {
						display: flex;
						align-items: center;

						image {
							width: 98upx;
							height: 98upx;
						}

						view {
							padding-left: 25upx;

							text {
								display: block;
								font-size: 25upx;
								color: #383838;
							}
						}
					}

					.fr {
						image {
							width: 47upx;
							height: 47upx;
						}
					}
				}

				.accordion_key {
					view {
						display: flex;
						align-items: center;
						padding-top: 16upx;

						text {
							font-size: 28upx;
							font-weight: bold;
						}

						.viewtop {
							color: #EF4D3D;
						}

						.viewbox {
							color: #808080;
						}
					}
				}
			}
		}
		.active{
			border: 2upx solid #EF4D3D;
			// .accordion_fl {
			// 	width: 20upx;
			// 	height: 20upx;
			// 	background-color: #EF4D3D;
			// 	border-radius: 50%;
			// }
		}



		border-radius: 20upx;
	}
	
	
	.footer{
		width: 490upx;
		height: 82upx;
		text-align: center;
		line-height: 82upx;
		color: #fff;
		border-radius: 10upx;
		background-color: #EF4D3D;
		font-weight: bold;
		font-size: 26upx;
		margin: 0 auto;
		margin-top: 130upx;
	}
	
	
	
	.screenshot {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	
		.screenshot_key {
			width: 720upx;
			height: 480upx;
			opacity: 1;
			background: #FFFFFF;
			box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
			border-radius: 20upx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding-top: 20upx;
	
			.image_top {
				width: 100upx;
				height: 100upx;
				margin: 0 auto;
				display: block;
			}
	
			.image_gb {
				width: 32upx;
				height: 32upx;
				position: absolute;
				top: 27upx;
				right: 27upx;
			}
	
			.screenshot_top {
				font-size: 28upx;
				color: #000;
				text-align: center;
				padding-top: 30upx;
			}
	
			.screenshot_box {
				font-size: 38upx;
				font-weight: bold;
				color: #000;
				text-align: center;
				padding-top: 20upx;
			}
	
			.screenshot_zhen {
				width: 601upx;
				height: 71upx;
				opacity: 1;
				border-radius: 17.52upx;
				background: #FFFFFF;
				line-height: 65upx;
				border: 3upx solid #F04D3E;
				font-size: 31.54upx;
				text-align: center;
				font-weight: bold;
				margin: 0 auto;
				margin-top: 50upx;
			}
	
			.screenshot_lis {
				font-size: 24upx;
				color: #808080;
				text-align: center;
				padding-top: 20upx;
			}
	
		}
	}
</style>
